<template>
  <!-- 1. 创建 DOM 容器， 指定容器大小 -->
  <div class="trend-chart-container" ref="target"></div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
// 2. 导入echarts 模块
import * as echarts from 'echarts'
import { useI18n } from 'vue-i18n'
import { watchSwitchLang } from '@/utils/i18n'

const i18n = useI18n()

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

// 3. 利用 echarts.init(target) 获取mChart实例
const target = ref(null)
let mChart
onMounted(() => {
  mChart = echarts.init(target.value)
  // 渲染图表
  renderChart()
})

const renderChart = () => {
  // 4. 配置图表数据
  const options = {
    // 鼠标移入之后展示提示框
    tooltip: {
      // 鼠标移入到坐标轴触发提示
      trigger: 'axis',
      // 移入坐标轴时，提示框展示内容的配置
      axisPointer: {
        // 显示十字准星
        type: 'cross',
        // 指示器的样式
        crossStyle: {
          // 色值
          color: '#999'
        }
      }
    },
    // 图例配置
    legend: {
      // 图例数据
      data: [i18n.t('msg.chart.monthIncome'), i18n.t('msg.chart.dayIncome')],
      // 图例的显示位置
      right: 0
    },
    // echarts 网格绘制的位置
    grid: {
      top: 20,
      right: 0,
      bottom: 0,
      left: 0,
      // 计算边距时包含标签
      containLabel: true
    },
    // X 轴配置
    xAxis: {
      // 坐标轴类型
      type: 'category',
      // 坐标轴数据
      data: props.data.monthAmountList.map((item) => item.time),
      // 刻度尺
      axisTick: {
        // 是否显示刻度
        show: false
      }
    },
    // Y 轴配置
    yAxis: {
      // 坐标轴类型
      type: 'value',
      // 最小值
      min: 0,
      // 最大值
      max: function (value) {
        return parseInt(value.max * 1.2)
      },
      // 刻度上展示的文字
      axisLabel: {
        formatter: `{value} ${i18n.t('msg.chart.unit')}`
      }
    },
    // 图表配置
    series: [
      // 柱状图
      {
        // 图表类型
        type: 'bar',
        // 图表名称 可以和图例联动
        name: i18n.t('msg.chart.monthIncome'),
        //  柱的宽度
        barWidth: 20,
        // 提示框的展示配置
        tooltip: {
          valueFormatter: function (value) {
            return value + i18n.t('msg.chart.unit')
          }
        },
        // 数据源
        data: props.data.monthAmountList.map((item) => item.amount)
      },
      // 曲线图
      {
        // 图表类型
        type: 'line',
        // 显得颜色
        color: '#6EC6D0',
        // 平滑
        smooth: true,
        // 图表名称 可以和图例联动
        name: i18n.t('msg.chart.dayIncome'),
        // 提示框的展示配置
        tooltip: {
          valueFormatter: function (value) {
            return value + i18n.t('msg.chart.unit')
          }
        },
        // 数据源
        data: props.data.dailyCurve.map((item) => item.amount)
      }
    ]
  }
  // 5. 渲染图表
  mChart.setOption(options)
}

watchSwitchLang(() => {
  renderChart()
})
</script>

<style scoped lang="scss">
.trend-chart-container {
  height: 100%;
}
</style>
